import uuidv1 from "uuid/v1";
import * as echarts from "echarts/dist/echarts";

let zz = {
  watch: {},
  methods: {
    loadmarkcz(position) {
      async function setDiv(p) {
        var htmlText = `
            <style>
          
            </style>
            <div class="box">
                <div class="title" >胜利大道、二高炉东南侧</div>
                <ul>
                    <li>
                        <span>流量</span>
                        <span>23.22(t/h)</span>
                    </li>
                    <li>
                        <span>温度</span>
                        <span>36.55(℃)</span>
                    </li>
                </ul>
                <div>
                    <p><span>时间：</span>2020-08--12T15:10:00</p>
                    <p><span>SN：</span>AGPM2020050006</p>
                </div>
            </div>
        `;

        const canvas2 = await XE.HTML.div2Canvas(htmlText, {
          width: 980,
          height: 560
        });

        p.drawCanvas(ctx => {
          ctx.clearRect(0, 0, 980, 560);
          ctx.drawImage(canvas2, 0, 0);
        });
      }
      //*********************************************************************** */
      const config = {
        position: position,
        rotation: [(_.random(0, 360) * Math.PI) / 180, 0, 0],
        scale: [50, 50, 30],
        positions: [
          0,
          -1,
          0,
          0,
          1,
          0,
          0,
          1,
          2,
          0,
          -1,
          2,
          0,
          1,
          0,
          0,
          -1,
          0,
          0,
          -1,
          2,
          0,
          1,
          2
        ],
        sts: [0, 0, 1, 0, 1, 1, 0, 1, 0, 0, 1, 0, 1, 1, 0, 1],
        indices: [0, 1, 2, 0, 2, 3, 4, 5, 6, 4, 6, 7],
        renderState: {
          cull: {
            enabled: true
          },
          polygonOffset: {},
          scissorTest: {
            rectangle: {}
          },
          depthRange: {},
          depthTest: {
            enabled: true
          },
          colorMask: {},
          depthMask: true,
          blending: {
            enabled: true,
            color: {},
            equationRgb: 32774,
            equationAlpha: 32774,
            functionSourceRgb: 770,
            functionDestinationRgb: 771,
            functionDestinationAlpha: 771
          },
          stencilTest: {
            frontOperation: {},
            backOperation: {}
          },
          sampleCoverage: {}
        },
        canvasWidth: 980,
        canvasHeight: 560,
        autoRegisterEditing: true
      };

      var p = new XE.Obj.CustomPrimitive(this._earth);
      p.xbsjFromJSON(config);
      // setDiv(p);
      setTimeout(() => setDiv(p), 500);
    }
  }
};

export default zz;
